<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> HTML5原生的 表单校验</title>
</head>
<body>
    <form action=""  >
        <div>
            <label for="">账号：</label>
            <input type="text" name="username" required pattern="\w{3,20}" >
        </div>
        <div>
            <label for=""> 密码：</label>
            <input type="password" name="password" required pattern="\w{6,20}" >
        </div>
      
        <div>
            <button  >登录</button>
        </div>
    </form>
    
</body>
<script src="../lib/font/jquery.min.js"></script>
<script>
    $(function(){
        $("button").click(function(){
            let username =document.querySelector("input[name='username']");
            if(!/\w{3,20}/.test(username.value)){
                username.setCustomValidity("用户名应该有3~20个字符组成");
            }else{
                username.setCustomValidity("");
            }
            let password = document.querySelector("input[name='password']");
            if(!/\w{6,20}/.test(password.value)){
                password.setCustomValidity("密码应为6~20位的字符");
            }else{
                password.setCustomValidity("");
            }

        })
       
    });
</script>
</html>